<!DOCTYPE html>
<html>

<head>
    <title>首页</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style type="text/css">
        .card{
            float:left;
        }
        .echarts .layui-card:first-child {
            float: left;

            width: 100%;
            text-align: left;
        }
        .echarts .layui-card:last-child {
            float: right;

            width: 100%;
            text-align: left;
        }
        .layui-card-body{
            width: 100%;
        }

    </style>
</head>

<body>

<!--<div class="layui-card-body" style="text-align: center;">-->
  <!--<img src="assets/images/welcome.png" style="max-width: 100%;">-->
    <!--<h1 class="layui-font-20 layui-font-cyan" style="margin-top: 10px;">玄集后台管理系统</h1>-->
    <!--<label class="layui-font-18 layui-font-gray" style="margin-top: 10px;">Intelligent reception robot background management system</label>-->

<!--</div>-->





<div class="layui-container"   style="width: 100%">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3" style="background-color: white">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <image src="assets/images/start-1.png" style="width:100px;height:100px;" ></image>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                总订单
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" data-name="doneNum" style="text-align: center;font-size: 32px;color:#ff6c60">
                                0
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3" style="background-color: white">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <image src="assets/images/start-2.png" style="width:100px;height:100px;" ></image>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                待付款
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"  data-name="waittingPayNum" style="text-align: center;font-size: 32px;color:#68c8c7">
                                0
                            </label>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-md3" style="background-color: white">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <image src="assets/images/start-3.png" style="width:100px;height:100px;" ></image>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                服务中
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"  data-name="serviceingNum" style="text-align: center;font-size: 32px;color:#feb04c">
                               0
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3" style="background-color: white">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <image src="assets/images/start-4.png" style="width:100px;height:100px;" ></image>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                待评价
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"  data-name="waittingforevaluateNum" style="text-align: center;font-size: 32px;color:#57c8f2">
                              0
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--平台营业额-->
    <div class="layui-card card" style="width:49%;margin-top:20px;">
        <div class="layui-card-header">今日平台营业额</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label" data-name="todayprice" style="text-align: center;font-size: 32px;color:#0880ff">
                        0.0
                    </label>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                昨日营业额
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"  data-name="yestodayprice" style="text-align: center;">
                                0.0
                            </label>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                本月营业额
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" data-name="thismonthprice" style="text-align: center;">
                                0.0
                            </label>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                累计营业额
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"  data-name="totalprice" style="text-align: center;">
                                0.0
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!--平台订单数-->
    <div class="layui-card card" style="margin-left:2%;width:49%;margin-top:20px;">
        <div class="layui-card-header">今日平台订单数</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label" data-name="todayOrdernum" style="text-align: center;font-size: 32px;color:#0880ff">
                       0
                    </label>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"  style="text-align: center;">
                                昨日订单数
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" data-name="yestodayOrdernum"  style="text-align: center;">
                                0
                            </label>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label"   style="text-align: center;">
                                本月订单数
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" data-name="thismonthOrdernum"  style="text-align: center;">
                                0
                            </label>
                        </div>
                    </div>
                </div>


                <div class="layui-col-md4">
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="text-align: center;">
                                累计订单数
                            </label>
                        </div>
                    </div>
                    <div class="layui-row">
                        <div class="layui-col-md12">
                            <label class="layui-form-label" data-name="doneNum" style="text-align: center;">
                               0
                            </label>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <div style="clear: both;"></div>
    <div class="echarts layui-col-md12">

        <div class="layui-card">
            <div class="layui-card-header"  style="text-align: left"> </div>
            <div class="layui-card-body">
                <div id="EchartZhu"  style="width: 100%; height: 500px; " ></div>
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="layui-card">
            <div class="layui-card-header" style="text-align: left"></div>
            <div class="layui-card-body">
                <div id="optionchartBing" style="width: 100%; height: 500px;"  ></div>
            </div>
        </div>


        <div style="clear: both;"></div>
    </div>
</div>
</body>
<script>
layui .use( 	[ 'table', 'form', 'layer', 'laydate', 'element', 'echarts','server',"admin" ], 	function() {

    var table = layui.table, layer = layui.layer, form = layui.form,admin=layui.admin;
    var laydate = layui.laydate;
    //	var element = layui.element,
 var   $ = layui.jquery, echarts = layui.echarts,server=layui.server;
    var chartZhu = echarts.init(document.getElementById('EchartZhu'));
    var chartBin = echarts.init(document.getElementById('optionchartBing'));
    layer.load(2);
    admin.req('common/statistics', {}, function (data) {
        layer.closeAll('loading');

        if (data.code == 0) {
            layer.msg(data.msg, {icon: 1, time: 500});
             server.loadData(".layui-container",data.data)
        } else {
            layer.msg(data.msg, {icon: 1, time: 500});
        }
    }, 'GET');


    var optionchart = {
        title : {
            text : '商品订单'
        },
        tooltip : {},
        legend : {
            data : [ '订单数' ,"金额"]
        },
        xAxis : {
            data : [ ]
        },
        yAxis : {
            type : 'value'
        },
        series : [ {
            name : '订单数',
            type : 'bar', //柱状
            data : [ ],
            itemStyle : {
                normal : { //柱子颜色
                    color : 'red'
                }
            },
        }  ,{ name:"金额", type:'bar',
            data:[],
            itemStyle:{
                normal:{
                    color:'blue'
                }
            }
        }   ]
    };


    var optionchartBing = {
        title : {
            text : '商品销售',
            subtext : '商品销售详请', //副标题
            x : 'center' //标题居中
        },
        tooltip : {
            // trigger: 'item' //悬浮显示对比
        },
        legend : {
            orient : 'vertical', //类型垂直,默认水平
            left : 'left', //类型区分在左 默认居中
            data : []
        },
        series : [ {
            type : 'pie', //饼状
            radius : '60%', //圆的大小
            center : [ '50%', '50%' ], //居中
            data : [  ]
        } ]
    };



    function selectChrt(data) {
        var secahTotal = 0;
        admin.req('common/echarts', {}, function (data) {
                if (data.code != 0) {
                    layer.msg('错误!' + data.msg);
                    return;
                }
                // console.log(optionchart)
                var data = data.data;
                optionchart.xAxis.data = [];
                optionchart.series[0].data = [];
                optionchart.series[1].data = [];
                if (data.chartZhu != null && data.chartZhu.length > 0) {
                   // for (var r in data.chartZhu) {
                    data.chartZhu.forEach(function (d){

                        if(!(d=="remove"||typeof d=="function")) {
                            console.log(d)
                            optionchart.xAxis.data.push(d.date);
                            optionchart.series[0].data.push(d.count)
                            optionchart.series[1].data.push(d.price)
                            secahTotal += (d.price ? d.price : 0);
                        }
                    })

                }

                chartZhu.setOption(optionchart, true);
                console.log(chartZhu)
                optionchartBing.legend.data = [];
                optionchartBing.series[0].data = [];
                if (data.chartBin != null && data.chartBin.length > 0) {
                    for (var r in data.chartBin) {

                        if((r!="remove"&&typeof data.chartBin[r]!="function")) {
                            console.log(r)
                            console.log(data.chartBin[r])
                            optionchartBing.legend.data.push(data.chartBin[r].name);
                            optionchartBing.series[0].data.push({
                                'value': data.chartBin[r].count,
                                'name': data.chartBin[r].name
                            });
                        }
                    }
                    // chartBin.setOption(optionchartBing, true);
                }
                chartBin.setOption(optionchartBing, true);
                layer.msg('操作成功!');
                layer.closeAll();
                //console.log(secahTotal)
               // $("#secahTotal").text(secahTotal.toFixed(2));
            } )
    }
    selectChrt();

    })
    </script>
</html>